

let UI = require('../src/uis/ui');
require('../src/uis/main.css');

let cmdId = 0;

window.onload = function () {
   console.log(`start............`);

   let editor = new UI.Div();
   editor.setWidth('480px');
   editor.setHeight('640px');
   editor.setBackground('gray');
   editor.setStyle('float',['left']);
   document.body.appendChild(editor.dom);

   let controller = new UI.Div();
   controller.setStyle('float',['left']);
   document.body.appendChild(controller.dom);

   //--------------
   // tab
   //
   let tabPanel = new UI.TabbedPanel();
   tabPanel.setStyle('float',['left']);
   controller.add(tabPanel);


   // tabs
   let pageBind = new UI.Div();
   pageBind.add(new UI.Text('bind'));
   pageBind.setBackground('cyan');

   let pageFrame = new UI.Div();
   pageFrame.add(new UI.Text('frame'));
   pageFrame.setBackground('purple');

   tabPanel.addTab('tab_bind','Bind',pageBind);
   tabPanel.addTab('tab_keyFrame','KeyFrame',pageFrame);

   //====================================
   // history
   let historyList = new UI.Listbox();
   historyList.setWidth('100px');
   // historyList.setStyle('float',['left']);
   controller.add(historyList);

   // let btn_add = new UI.Button('添加');
   // btn_add.onClick(()=>{
   //    // 添加一条记录
   //    let listItem = new UI.Listbox.ListboxItem(historyList);
   //    listItem.setId(++cmdId);
   //    listItem.add(new UI.Text(`cmdId:${listItem.getId()}`));
   //    historyList.add(listItem);
   //
   //    // console.log(`historyList.listitems.length:${historyList.listitems.length}`);
   //    // historyList.selectIndex(historyList.listitems.length - 1);
   //    historyList.setValue(listItem.getId());
   // });
   // controller.add(btn_add);

   historyList.onChange(()=>{
      let selected = historyList.getValue();
      console.log(`selected:${selected}`);
   });

};
